<script setup>
import {
  CloudDoneSharp,
  CheckmarkCircle,
  AddCircle,
  HeartCircle,
  RemoveCircle,
  FilterCircle,
} from "@vicons/ionicons5";
import { usePlayerStateStore } from "@/stores/playerState";
import { useNotifyStateStore } from "@/stores/notifyState";

const props = defineProps({
  songList: [Object],
});

const playerStore = usePlayerStateStore();
const notifyStore = useNotifyStateStore();

const play_to = (item) => {
  notifyStore.player_ctrl = {
    cmd: "play_to",
    val: item,
  };
};

const add_to_playlist = (item) => {
  notifyStore.player_ctrl = {
    cmd: "add_to_playlist",
    val: item,
  };
};

const add_to_favorite = (item) => {
  notifyStore.player_ctrl = {
    cmd: "add_to_favorite",
    val: item,
  };
}

const remove_from_local = (item) => {
  notifyStore.player_ctrl = {
    cmd: "remove_from_local",
    val: item,
  };
};

const item_action_more = () =>{}

</script>
<template>
  <n-grid :cols="19" class="text-center p-2 bg-blue-400 rounded font-bold bg-opacity-30">
    <n-gi :span="1">序号</n-gi>
    <n-gi :span="1">来源</n-gi>
    <n-gi :span="3">曲名</n-gi>
    <n-gi :span="2">歌手</n-gi>
    <n-gi :span="2">专辑</n-gi>
    <!-- <n-gi :span="1" class="text-right">年份</n-gi> -->
    <n-gi :span="1" class="text-right">波特率</n-gi>
    <n-gi :span="1" class="text-right">码率</n-gi>
    <!-- <n-gi :span="1" class="text-right">Bit</n-gi> -->
    <n-gi :span="1" class="text-right">大小</n-gi>
    <n-gi :span="1">歌词</n-gi>
    <n-gi :span="3">Tag</n-gi>
    <n-gi :span="3">操作</n-gi>
  </n-grid>
  <div class="h-1"></div>
  <n-empty description="你的列表是空的!" class="bg-white bg-opacity-80 p-10" v-if="songList==null || songList.length == 0">
    <template #extra>
      <n-button type="primary" size="small"> 看看别的 </n-button>
    </template>
  </n-empty>
  <n-scrollbar class="flex-grow overflow-hidden" v-else>
    <n-list hoverable clickable class="bg-white bg-opacity-25">
      <n-list-item v-for="(item, index) in songList" :key="index" @dblclick="play_to(item)" class=" select-none">
        <n-grid :cols="19" class="text-center" :title="item.path">
          <n-gi :span="1">{{ index + 1 }} </n-gi>
          <n-gi :span="1">
            <n-icon color="#0e66FF" size="18" v-if="item.is_online" >
              <CloudDoneSharp />
            </n-icon>
              <n-icon color="#0e7a0d" size="18" v-else >
              <CheckmarkCircle  />
            </n-icon>
          </n-gi>
          <n-gi :span="3">{{ item.title }} </n-gi>
          <n-gi :span="2">{{ item.artist }}</n-gi>
          <n-gi :span="2">{{ item.album }}</n-gi>
          <!-- <n-gi :span="1" class="text-right">{{ item.year }}</n-gi> -->
          <n-gi :span="1" class="text-right"><n-tag type="success" size="small">{{ item.bitrate }} K</n-tag></n-gi>
          <n-gi :span="1" class="text-right">{{ item.sample_rate }}</n-gi>
          <!-- <n-gi :span="1" class="text-right">{{ item.bit_depth }}</n-gi> -->
          <n-gi :span="1" class="text-right">{{ (item.size / 1024 / 1024).toFixed(1) }}M</n-gi>
          <n-gi :span="1">
            <n-tag v-if="item.lyric.length>0" type="warning" size="small">LRC</n-tag>
          </n-gi>
          <n-gi :span="3"><n-tag type="info" size="small">{{ item.dir }}</n-tag></n-gi>
          <n-gi :span="3">
            <n-button-group>
              <n-button text title="添加到默认播放列表" @click="add_to_playlist(item)">
                <n-icon color="#0e66FF" size="20" class="opacity-100 hover:opacity-60">
                  <AddCircle />
                </n-icon>
              </n-button>
              <n-button text title="添加到收藏" @click="add_to_favorite(item)">
                <n-icon color="#FF0a0d" size="20" class="opacity-100 hover:opacity-60">
                  <HeartCircle />
                </n-icon>
              </n-button>
              <n-button text title="从库中删除" @click="remove_from_local(item)">
                <n-icon color="#0e7a0d" size="20" class="opacity-100 hover:opacity-60">
                  <RemoveCircle />
                </n-icon>
              </n-button>
              <n-button text title="更多..." @click="item_action_more">
                <n-icon color="purple" size="20" class="opacity-100 hover:opacity-60">
                  <FilterCircle />
                </n-icon>
              </n-button>
            </n-button-group>
          </n-gi>
        </n-grid>
      </n-list-item>
    </n-list>
  </n-scrollbar>
</template>
